<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{{message}}</p>
        <!-- <img v-bind:src="images"> -->
        <p v-if="showmage">hello</p>
        <p v-else>good</p>
        <ul>
            <li v-for="item in items" :key="item.id">
                {{item.text}}
            </li>
        </ul>
        <div id="lightDiv">
            <div v-show="lightOn"></div>
            <img src="https://static.runoob.com/images/svg/img_lightBulb.svg">
        </div>
        <button v-on:click="lightOn =! lightOn">开/关</button>
        <div v-show="lig">
            <img id="imgs" 
                src="https://imusae-download.90sheji.com/imusae/download/2021/06/14/c24f1bd1c41eb755b41672157b487c74.png?sign=ae09a7ab9ecf29fd0c34754791cd6a83&t=64ee1600&imageMogr2/thumbnail/x465/crop/!697x-0a0/auto-orient/interlace/1/sharpen/1/quality/85/format/webp"
                alt="">
                <p>维维我好想你！！</p>
        </div>
        <button v-on:click="lig=!lig">显示/隐藏</button>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    message: 'hello vue!! 翠翠 I live you',
                    img:'https://pic.616pic.com/ys_img/00/94/33/KsNL5Y37Yn.jpg',
                    lig:false,
                    images: 'https://static.runoob.com/images/code-icon-script.png',
                    showmage: true,
                    items: [{
                            id: 1,
                            text: '李维'
                        },
                        {
                            id: 2,
                            text: '翠翠'
                        },
                        {
                            id: 3,
                            text: '维维'
                        }
                    ],
                    lightOn: false
                }
            },
            // methods:{
            //     show(){

            //     }
            // }
        })
        app.mount('#app')
    </script>
</body>
<style>
    /* * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-color: rgb(148, 114, 213);

    }

    #app {
        border: dashed black 1px;
        background-color: deepskyblue; */
    /* z-index: 1; */
    /* display: inline-block;
        align-items: center;
    }

    #app>button {
        background-color: aqua;
        margin: auto;
        align-items: center;
    } */

    body{
        background-color: aqua;
    }
    #app {
        background-color: rgb(236, 207, 248);
        border: dashed black 1px;
        display: inline-block;
        padding-bottom: 100px;
        align-items: center;
    }

    #imgs{
        width: 180px;
        height:150px;
    }
    #app>button {
        display: block;
        margin: auto;
    }

    #lightDiv {
        position: relative;
        width: 150px;
        height: 150px;
    }

    #lightDiv>img {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #lightDiv>div {
        position: absolute;
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        border-radius: 50%;
        background-color: yellow;
    }
</style>

</html>